<!doctype html> 
<html> 
 <head> 
  <title>WarGames Interface</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
  <script type="text/javascript"> 
  
   function createRandom()
   {
		var randomFirstName=Math.floor(Math.random()*6);
		var firstName=new Array();
		firstName[0]="John";      
		firstName[1]="Chris";
		firstName[2]="Tom";
		firstName[3]="Michael";
		firstName[4]="Sean";
		firstName[5]="Paul";
		$("#fname").val(firstName[randomFirstName]);
		
		var randomLastName=Math.floor(Math.random()*8);
		var lastName=new Array();
		lastName[0]="Carone";      
		lastName[1]="Nostrand";
		lastName[2]="Thomas";
		lastName[3]="Carr";
		lastName[4]="Parker";
		lastName[5]="Winslett";
		lastName[6]="Burgess";
		lastName[7]="Smilack";
		$("#lname").val(lastName[randomLastName]);
   
		var randomAge=Math.floor(Math.random()*75);
		$("#desc").val(randomAge + " years old");

		var randomCardiac=Math.floor(Math.random()*3);
		var cardState=new Array();
		cardState[0]="Normal";      
		cardState[1]="Hypotensive";
		cardState[2]="Hyperdynamic";
		$("#card").val(cardState[randomCardiac]);
		
		var randomResp=Math.floor(Math.random()*3);
		var respState=new Array();
		respState[0]="Normal";      
		respState[1]="Somnolent";
		respState[2]="Acute Distress";
		$("#resp").val(respState[randomResp]);

		var randomRen=Math.floor(Math.random()*3);
		var renState=new Array();
		renState[0]="Normal";      
		renState[1]="Pre-renal";
		renState[2]="Acute Tubular Necrosis";
		$("#ren").val(renState[randomRen]); 
   }   
   function submitForm() {

      $('#loading').show();
           
      var data = "{";
      data += '"firstname":"' + $('#fname').val() + '",';
      data += '"lastname":"' + $('#lname').val() + '",';
      data += '"description":"' + $('#desc').val() + '",';
      data += '"state":["' + $('#card').val() + ',' +
                             $('#resp').val() + ',' +
                             $('#ren').val() + '"]';
      data += "}";
 
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients",
         type: "POST",
         dataType: "json",
         data: data,
         success: printResult
      });
   }
 
   var d, t, j;
   function printResult(data, textStatus, jqXHR) {
      d = data;
      t = textStatus;
      j = jqXHR;
      $('#submit').text(data + j + t);

      window.opener.getAllPatients();
      self.close();
     
   }
  </script> 
  <style type="text/css"> 
   body { font-family: "Arial", "sans serif"; }
   fieldset { display: inline-block; }
  </style> 
 </head> 
 <body> 
 <input type="button" name="random" value="Create Random Patient" id="random" onclick="createRandom()"> 
  <form id="f"> 
   <fieldset> 
    <legend>Fields</legend> 
    <table> 
     <tr> 
      <td><label for="fname">First Name</label></td> 
      <td><input type="text" name="firstname" id="fname"></td> 
     </tr>
     <tr> 
      <td><label for="lname">Last Name</label></td> 
      <td><input type="text" name="lastname" id="lname"></td> 
     </tr>
     <tr> 
      <td><label for="desc">Description</label></td> 
      <td><input type="text" name="description" id="desc"></td> 
     </tr> 
     <tr> 
      <td><label for="card">Cardiac state</label></td> 
      <td>
       <select name="cardiacstate" id="card">
        <option value="Normal">Normal</option>
        <option value="Hypotensive">Hypotensive</option>
        <option value="Hyperdynamic">Hyperdynamic</option>
       </select>
      </td> 
     </tr> 
     <tr> 
      <td><label for="resp">Respiratory state</label></td> 
      <td>
       <select name="respiratorystate" id="resp">
        <option value="Normal">Normal</option>
        <option value="Somnolent">Somnolent</option>
        <option value="Acute Distress">Acute Distress</option>
       </select>
      </td> 
     </tr> 
     <tr> 
      <td><label for="renal">Renal state</label></td> 
      <td>
       <select name="renalstate" id="ren">
        <option value="Normal">Normal</option>
        <option value="Pre-renal">Pre-renal</option>
        <option value="Acute Tubular Necrosis">Acute Tubular Necrosis</option>
       </select>
      </td> 
     </tr> 
    </table> 
   </fieldset> 
   <br> 
   <input type="button" name="submit" value="Submit" id="submit" onclick="submitForm()"> 
  </form> 
  <img id="loading" src="loading.gif" style="display: none;">
  <div id="data"></div> 
  <div id="result"></div>
 </body>
</html>